<template>
  <div>
    <!-- Breadcrumb 面包屑 导航区-->
    <!-- <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb> -->
    <!-- Card 卡片 卡片视图区-->
    <el-card class="box-card">
      <!-- 表格区-->
      <el-table :data="userList" border stripe>
        <el-table-column type="index" />
        <el-table-column prop="id" label="编号" />
        <el-table-column label="头像">
          <template slot-scope="scope">
            <span><img :src="scope.row.avatarUrl" class="user-avatar"> </span>
          </template>
        </el-table-column>
        <el-table-column prop="nickName" label="昵称" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="tel" label="手机" />
        <el-table-column label="操作">
          <!-- 操作模板-->
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showEditDialog(scope.row.id)"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域-->
      <el-pagination
        :current-page="queryInfo.pagenum"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 修改用户信息的对话框-->
    <el-dialog
      title="修改用户"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="EditDialogClosed"
    >
      <div>
        <p>当前的用户编号：{{ userInfo.id }}</p>
        <p>姓名：{{ userInfo.name }}，手机号码：{{ userInfo.tel }}</p>

        <!--  树形控件区-->
        <!-- node-key每个树节点用来作为唯一标识的属性，整棵树应该是唯一的-->
        <el-tree
          ref="treeRef"
          :data="fstList"
          show-checkbox
          node-key="id"
          :default-expand-all="true"
          :default-checked-keys="defaultCheckedKkeys"
          :props="treeProps"
          @check="setChecked"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="EditDialogClosed">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fstList: null, // 所有发射台树
      treeProps: {
        // 树形控件的属性绑定
        children: 'children',
        label: 'fstName'
      },
      defaultCheckedKkeys: [], // 默认选中的节点数组
      // 获取用户列表参数
      queryInfo: {
        // query: '',
        pagenum: 1, // 当前页码数
        pagesize: 5 // 当前每页有多少条
      },
      // 用户列表
      userList: null,
      userInfo: {
        id: '',
        name: '',
        tel: '',
        fst_id: ''
      }, // 用户详细信息
      total: 0, // 总共有多少条数据
      editDialogVisible: false // 修改用户对话框显示与隐藏
    }
  },
  watch: {
    defaultCheckedKkeys() {
      // 检测树的选中状态，最多2个同时选中
      this.$nextTick(() => {
        if (this.defaultCheckedKkeys.length > 1) {
          // 设置tree的其他节点 为不可选
          const _self = this
          for (let i = 0; i < this.fstList.length; i++) {
            const arr = this.defaultCheckedKkeys
            arr.find(function(value) {
              if (value === _self.fstList[i].id) {
              // 则包含该元素
                _self.fstList[i].disabled = false
              } else {
                _self.fstList[i].disabled = true
              }
            })
          }
        } else {
        // 其他的节点设为可以点
          for (let i = 0; i < this.fstList.length; i++) {
            this.fstList[i].disabled = false
          }
        }
      })// end of tick
    } // end of default-checked-keys
  },
  created() {
    this.getUserlist()
  },
  methods: {

    // 优化异步操作 async await
    async getUserlist() {
      console.log(this.queryInfo)
      const { data: res } = await this.$post('Clients/GetClientList', this.queryInfo)
      console.log(res)
      if (res.code !== 200) return this.$message.error('获取数据失败')
      this.userList = res.data.records
      console.log(this.userList)
      this.total = res.data.total
    },
    // 显示修改对话框 事件处理函数
    async showEditDialog(id) {
      // 获取树列表
      const { data: tres } = await this.$post('Fsts/get_fst_list')
      console.log(tres.data)
      if (tres.code !== 200) {
        return this.$message.error('读取发射台信息失败')
      }
      this.fstList = tres.data

      console.log(id)
      // 获取用户信息
      this.userInfo.id = id
      const { data: res } = await this.$post('Clients/detail', { uid: this.userInfo.id })
      console.log(res.data)
      if (res.code !== 200) {
        return this.$message.error('读取用户信息失败' + res.message)
      }
      this.userInfo = res.data.client
      // 设置选中的发射台
      const dataStr = this.userInfo.fstId// 原始字符串
      const dataStrArr = dataStr.split(',')// 分割成字符串数组
      const dataIntArr = []// 保存转换后的整型字符串
      dataStrArr.forEach(function(data, index, arr) {
        dataIntArr.push(+data)
      })
      this.defaultCheckedKkeys = dataIntArr// 设置默认选中节点

      this.editDialogVisible = true
    },
    setChecked(a, b) {
      // 处理树点击事件
      this.defaultCheckedKkeys = b.checkedKeys
    },
    // 修改关闭事件处理
    async saveEdit() {
      const CheckedKeys = this.$refs.treeRef.getCheckedKeys()
      console.log('CheckedKeys=', CheckedKeys)
      const fsts = []
      for (let i = 0; i < CheckedKeys.length; i++) {
        fsts.push(CheckedKeys[i])
      }

      // 数组转换为字符串
      const IDstr = fsts.join(',')
      console.log('IDstr=', IDstr)
      this.userInfo.fst_id = IDstr
      const uid = this.userInfo.id
      // 提交数据到后台更新
      const { data: res } = await this.$post(
        'Clients/edit',
        { uid: uid, fstId: IDstr }
      )
      if (res.code !== 200) {
        return this.$message.error('更新用户发射台信息失败' + res.message)
      }
      this.$message.success('更新用户发射台信息成功！')
      this.editDialogVisible = false
    },
    EditDialogClosed() { // 关闭窗口
      this.defaultCheckedKkeys = []
      this.editDialogVisible = false
    },
    // 监听分页数量设置
    handleSizeChange(newsize) {
      console.log(newsize)
      this.queryInfo.pagesize = newsize
      this.getUserlist()
    },
    // 监听页码值改变
    handleCurrentChange(newpage) {
      console.log(newpage)
      this.queryInfo.pagenum = newpage
      this.getUserlist()
    }
  }
}
</script>
<style lang="less" scoped>
    .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
</style>
